<template>
  <div class="props-panel">
    <t-form label-align="left" v-if="pen">
      <!-- <h5 class="mb-24">图元</h5> -->

      <t-form-item label="ID" name="id">
        <t-input v-model="pen.id" @change="changeValue('id')" />
      </t-form-item>
      <t-form-item label="通道" name="bindChannel">
        <t-input v-model="pen.bindChannel" @change="changeValue('bindChannel')" />
      </t-form-item>
      <t-form-item label="线路" name="bindLine">
        <t-input v-model="pen.bindLine" @change="changeValue('bindLine')" />
      </t-form-item>
      <t-form-item label="文本" name="text">
        <t-input v-model="pen.text" @change="changeValue('text')" />
      </t-form-item>
      <t-form-item label="隐藏文本" name="hiddenText">
        <t-switch size="large" v-model="pen.hiddenText" @change="changeValue('hiddenText')"></t-switch>
      </t-form-item>
      <t-form-item label="颜色" name="color">
        <t-color-picker
          class="w-full"
          v-model="pen.color"
          :enableAlpha="true"
          :show-primary-color-preview="false"
          format="CSS"
          :color-modes="['monochrome']"
          @change="changeValue('color')"
        />
      </t-form-item>
      <t-form-item label="背景" name="background">
        <t-color-picker
          class="w-full"
          v-model="pen.background"
          :enableAlpha="true"
          :show-primary-color-preview="false"
          format="CSS"
          :color-modes="['monochrome']"
          @change="changeValue('background')"
        />
      </t-form-item>
      <t-form-item label="线条样式" name="dash">
        <t-select v-model="pen.dash" valueDisplay="trigger" @change="changeValue('dash')">
          <template #valueDisplay="{ value }">
            <svg style="height: 20px; width: 110px;">
              <g fill="none" stroke="black" stroke-width="1">
                <path :stroke-dasharray="loadActiveLineFun(value)" d="M0 9 l85 0"></path>
              </g>
            </svg>
          </template>
          <t-option v-for="(item, index) in lineDashs" :key="index" :value="index">
            <svg style="height: 20px;width: 130px;">
              <g fill="none" stroke="black" stroke-width="1">
                <path :stroke-dasharray="item.join(' ')" d="M0 9 l85 0"></path>
              </g>
            </svg>
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="线条宽度" name="lineWidth">
        <t-input-number
          :min="0"
          :max="100"
          :step="0.01"
          theme="column"
          style="width: 100%;"
          v-model="pen.lineWidth"
          @change="changeValue('lineWidth')"
        />
      </t-form-item>
      <t-form-item label="边框颜色" name="borderColor">
        <t-color-picker
          class="w-full"
          v-model="pen.borderColor"
          :enableAlpha="true"
          :show-primary-color-preview="false"
          format="CSS"
          :color-modes="['monochrome']"
          @change="changeValue('borderColor')"
        />
      </t-form-item>
      <t-form-item label="边框宽度" name="borderWidth">
        <t-input-number
          :min="0"
          :max="100"
          :step="0.01"
          theme="column"
          style="width: 100%;"
          v-model="pen.borderWidth"
          @change="changeValue('borderWidth')"
        />
      </t-form-item>
      <t-form-item label="起点端样式" name="fromArrow">
        <t-select v-model="pen.fromArrow" valueDisplay="trigger" @change="changeValue('fromArrow')">
          <template #valueDisplay="{ value }">
            <svg class="l-icon" aria-hidden="true">
              <use :xlink:href="fromArrows.find((item) => item.value === value)?.icon"></use>
            </svg>
          </template>
          <t-option v-for="item in fromArrows" :key="item.value" :value="item.value">
            <svg class="l-icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="终点端样式" name="toArrow">
        <t-select v-model="pen.toArrow" valueDisplay="trigger" @change="changeValue('toArrow')">
          <template #valueDisplay="{ value }">
            <svg class="l-icon" aria-hidden="true">
              <use :xlink:href="toArrows.find((item) => item.value === value)?.icon"></use>
            </svg>
          </template>
          <t-option v-for="item in toArrows" :key="item.value" :value="item.value">
            <svg class="l-icon" aria-hidden="true">
              <use :xlink:href="item.icon"></use>
            </svg>
          </t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="圆角" name="borderRadius">
        <t-input-number
          :min="0"
          :max="1"
          :step="0.01"
          theme="column"
          style="width: 100%;"
          v-model="pen.borderRadius"
          @change="changeValue('borderRadius')"
        />
      </t-form-item>
      <t-form-item label="图标旋转" name="iconRotate">
        <t-input-number 
          :min="0"
          theme="column"
          style="width: 100%;"
          v-model="pen.iconRotate"
          :allowInputOverLimit="false"
          @change="changeValue('iconRotate')"
        ></t-input-number>
      </t-form-item>
      <t-form-item label="不透明度" name="globalAlpha">
        <t-slider
          v-model="pen.globalAlpha"
          :min="0"
          :max="1"
          :step="0.01"
          @change="changeValue('globalAlpha')"
        />
        <span class="ml-16" style="width: 50px; line-height: 30px">
          {{ pen.globalAlpha }}
        </span>
      </t-form-item>

      <t-divider />

      <t-form-item label="X" name="x">
        <t-input-number v-model="rect.x" @change="changeRect('x')" />
      </t-form-item>
      <t-form-item label="Y" name="y">
        <t-input-number v-model="rect.y" @change="changeRect('y')" />
      </t-form-item>
      <t-form-item label="宽" name="width">
        <t-input-number v-model="rect.width" @change="changeRect('width')" />
      </t-form-item>
      <t-form-item label="高" name="height">
        <t-input-number v-model="rect.height" @change="changeRect('height')" />
      </t-form-item>
      <t-form-item v-if="pen.children && pen.children.length > 0" label="状态" name="showChild">
        <t-select v-model="pen.showChild" @change="changeValue('showChild')">
          <t-option
            v-for="(item, index) in pen.children"
            :key="item"
            :value="index"
            :label="'状态'+(index+1)"
          >
          </t-option>
        </t-select>
      </t-form-item>

      <t-divider />

      <t-form-item label="文字水平对齐" name="textAlign">
        <t-select v-model="pen.textAlign" @change="changeValue('textAlign')">
          <t-option key="left" value="left" label="左对齐"></t-option>
          <t-option key="center" value="center" label="居中"></t-option>
          <t-option key="right" value="right" label="右对齐"></t-option>
        </t-select>
      </t-form-item>
      <t-form-item label="文字垂直对齐" name="textBaseline">
        <t-select
          v-model="pen.textBaseline"
          @change="changeValue('textBaseline')"
        >
          <t-option key="top" value="top" label="顶部对齐"></t-option>
          <t-option key="middle" value="middle" label="居中"></t-option>
          <t-option key="bottom" value="bottom" label="底部对齐"></t-option>
        </t-select>
      </t-form-item>

      <t-divider />

      <!-- <t-space>
        <t-button @click="top">置顶</t-button>
        <t-button @click="bottom">置底</t-button>
        <t-button @click="up">上一层</t-button>
        <t-button @click="down">下一层</t-button>
      </t-space> -->
    </t-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, onUnmounted, ref, watch } from 'vue';
import { useSelection } from '../../../services/selections';


const { selections } = useSelection();

const pen = ref<any>();
// 位置数据。当前版本位置需要动态计算获取
const rect = ref<any>();

const fromArrows = [
  { icon: '#l-line', value: '' },
  { icon: '#l-from-triangle', value: 'triangle' },
  { icon: '#l-from-diamond', value: 'diamond' },
  { icon: '#l-from-circle', value: 'circle' },
  { icon: '#l-from-lineDown', value: 'lineDown' },
  { icon: '#l-from-lineUp', value: 'lineUp' },
  { icon: '#l-from-triangleSolid', value: 'triangleSolid' },
  { icon: '#l-from-diamondSolid', value: 'diamondSolid' },
  { icon: '#l-from-circleSolid', value: 'circleSolid' },
  { icon: '#l-from-line', value: 'line' },
];
const toArrows = [
  { icon: '#l-line', value: '' },
  { icon: '#l-to-triangle', value: 'triangle' },
  { icon: '#l-to-diamond', value: 'diamond' },
  { icon: '#l-to-circle', value: 'circle' },
  { icon: '#l-to-lineDown', value: 'lineDown' },
  { icon: '#l-to-lineUp', value: 'lineUp' },
  { icon: '#l-to-triangleSolid', value: 'triangleSolid' },
  { icon: '#l-to-diamondSolid', value: 'diamondSolid' },
  { icon: '#l-to-circleSolid', value: 'circleSolid' },
  { icon: '#l-to-line', value: 'line' },
];

onMounted(() => {
  getPen();
});

const getPen = () => {
  pen.value = selections.pen;
  if (!pen.value["globalAlpha"]) {
    pen.value["globalAlpha"] = 1;
  }
  rect.value = meta2d.getPenRect(pen.value);
};

// 监听选中不同图元
// @ts-ignore
// const watcher = watch(() => selections.pen.id, getPen);
const watcher = watch(() => {
  if (selections.pen) {
    selections.pen.id;
  }
}, getPen);

watch(
  () => selections.pen,
  (newVal: any) => {
    if (newVal) {
      getPen();
    }
  },
  { immediate: true }
);

// const lineDashs = [undefined, [5, 5]];
const lineDashs = [[], [5, 5], [10, 10], [10, 10, 2, 10]];


const changeValue = (prop: string) => {
  const v: any = { id: pen.value.id };
  console.log('v======', v)
  console.log('v[prop]__old', v[prop])

  v[prop] = pen.value[prop];
  console.log('v[prop]___new', v[prop])
  if (prop === 'dash') {
    v.lineDash = lineDashs[v[prop]];
  }
  meta2d.setValue(v, { render: true });
};
const loadActiveLineFun = (value: number) => {
  const _activeLine = lineDashs.find((_d, index) => index === value);
  return _activeLine?.join(' ')
}

const changeRect = (prop: string) => {
  const v: any = { id: pen.value.id };
  v[prop] = rect.value[prop];
  meta2d.setValue(v, { render: true });
};

const top = () => {
  meta2d.top();
  meta2d.render();
};
const bottom = () => {
  meta2d.bottom();
  meta2d.render();
};
const up = () => {
  meta2d.up();
  meta2d.render();
};
const down = () => {
  meta2d.down();
  meta2d.render();
};

onUnmounted(() => {
  watcher();
});
</script>
<style lang="scss" scoped>
.props-panel {
  padding: 8px 12px;
  :deep(.t-form) {
    .t-form__item {
      margin-bottom: 8px;
    }
    .t-form__label {
      padding-right: 8px;
      label {
        font-size: 12px;
        font-weight: 400;
        color: #7f838c;
        line-height: 18px;
        letter-spacing: 0px;
      }
    }

    .t-divider {
      margin: 12px 0;
    }

    .t-input--auto-width {
      width: 100%;
    }

    .t-space {
      gap: 4px;
    }
  }
}
</style>